<script setup>
import { ref, watch } from 'vue'
import Dialog from '@/components/Dialog.vue'
import { useI18n } from 'vue-i18n'
import notice from '@/static/icon/index/notice.png'
import item1 from '@/static/icon/index/item1.png'
import item2 from '@/static/icon/index/item2.png'
import item3 from '@/static/icon/index/item3.png'
import item4 from '@/static/icon/index/item4.png'
import tg from '@/static/icon/index/tg.png'
import x from '@/static/icon/index/x.png'

const { t } = useI18n()
</script>
<template>
  <div class="container">
    <div class="body">
      <div class="body_top px-15 pt-[12px]">
        <div class="w-100% h-28 bg-[#F2F3F6] rounded-[8px] flex items-center px-10">
          <van-image width="16" height="16" :src="notice" />
          <div class="font-pingfang text-[12px] text-[#7A7777] ml-8">世界公链开启价值新纪元</div>
        </div>
      </div>
      <div class="body_content px-15">
        <!-- vant轮播 -->
          <van-swipe :autoplay="3000" class="my-swipe">
            <van-swipe-item v-for="(item, index) in [item1, item2, item3, item4]" :key="index">
              <van-image :src="item" class="w-100%" />
            </van-swipe-item>
          </van-swipe>
      </div>
    </div>
  </div>
  <Dialog ref="dialog" />
</template>
<style lang="scss" scoped>
.container {
  width: 100%;

  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
  .body {
    width: 100%;
    min-height: calc(100vh - var(--van-nav-bar-height));

    &_top {
      width: 100%;
      height: 170px;
      background: linear-gradient(192deg, #191D1C 30.36%, #237D4E 90.99%);
    }
    &_content{
      margin-top: -116px;
    }
  }
}
</style>
